import 'dart:io';

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp/page/utils/upload_images.dart';
import 'package:image_picker/image_picker.dart';

const List<String> defaultImages = [
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
  'http://r0utoyzux.hn-bkt.clouddn.com/bo.jpg',
];

// 图片宽750, 高424px;
var imageWidth = 750.0;
var imageHeight = 424.0;
var imageWidthHeightRatio = imageWidth / imageHeight;

class CommonImagePicker extends StatefulWidget {
  final ValueChanged<List<File>> onChange;
  final ValueChanged<String> onImageChange;

  const CommonImagePicker({Key key, this.onChange, this.onImageChange})
      : super(key: key);

  @override
  _CommonImagePickerState createState() => _CommonImagePickerState();
}

class _CommonImagePickerState extends State<CommonImagePicker> {
  List<File> files = [];
  List<String> imageString = [];

  _pickImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    if (null == image) return;

    setState(() {
      files = files..add(image);
    });

    //拿数据发送到上一层组件
    if (widget.onChange != null) {
      widget.onChange(files);
    }
  }

  @override
  Widget build(BuildContext context) {
    var width = (MediaQuery.of(context).size.width - 10.0 * 4) / 3;
    var height = width / imageWidthHeightRatio;

    // 添加点击组件
    Widget addButton = GestureDetector(
      onTap: () {
        _pickImage();
      },
      behavior: HitTestBehavior.translucent,
      child: Container(
        width: width,
        height: height,
        color: Colors.grey,
        child: Center(
          child: Text(
            '+',
            style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.w100),
          ),
        ),
      ),
    );

    //组件1
    // Widget addButton = Container(
    //   width: width,
    //   height: height,
    //   color: Colors.grey,
    //   child: Center(
    //     child: Text(
    //       '+',
    //       style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.w100),
    //     ),
    //   ),
    // );

    //组件2
    Widget wrapper(File imageUri) {
      return Stack(
        //溢出不隐藏
        overflow: Overflow.visible,
        children: [
          Image.file(imageUri, width: width, height: height, fit: BoxFit.cover),
          Positioned(
            right: -20.0,
            top: -20.0,
            //删除指定组件
            child: IconButton(
                icon: Icon(
                  Icons.delete_forever,
                  color: Colors.red,
                ),
                onPressed: () {
                  setState(() {
                    // .. 表示删除之后的files 一个.表示一个对象
                    files = files..remove(imageUri);
                  });
                  if (null != widget.onChange) {
                    widget.onChange(files);
                  }
                  //删除图片信息
                  //print(files);
                }),
          )
        ],
      );
    }

    //遍历组件  ..add 类似js es6语法解构 按钮放在最后
    List<Widget> list = files.map((e) => wrapper(e)).toList()..add(addButton);

    return Container(
        child: Padding(
      padding: EdgeInsets.only(
        left: 10.0,
      ),
      child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: list,
      ),
    ));
  }
}
